<template>
  <div style="padding: 20px;">
    <div class="topLocation">请假申请管理 / 请假审批</div>
    <div class="topTool">
      <div class="group">申请者姓名：</div>
      <el-input v-model="searchName" placeholder="请输入申请者姓名" style="margin-right: 50px;"></el-input>
      <div class="group">申请者类型：</div>
      <el-select v-model="searchType" placeholder="请选择申请者类型" style="margin-right: 50px;">
        <el-option label="球员" value="球员"></el-option>
        <el-option label="教练" value="教练"></el-option>
        <el-option label="所有类型" value=""></el-option>
      </el-select>
      <div class="group">请假类型：</div>
      <el-input v-model="searchLeaveType" placeholder="请输入请假类型" style="margin-right: 50px;"></el-input>
      <div class="group">申请状态：</div>
      <el-select v-model="searchStatus" placeholder="请选择审批状态">
        <el-option label="未通过" value="未通过"></el-option>
        <el-option label="通过" value="通过"></el-option>
        <el-option label="所有状态" value=""></el-option>
      </el-select>
      <el-button type="primary" :icon="Search" @click="handleSearch">查询</el-button>
      <el-button type="danger" :icon="Delete" @click="handleDelList" v-if="multipleSelection.length > 0">删除选中审批</el-button>
    </div>
    <el-table
        :data="leaveData"
        :header-cell-style="{ background: '#f6f9fa'}"
        @sort-change="handleSortChange"
        empty-text="暂无数据"
        @selection-change="handleSelectionChange">
      <el-table-column type="selection"/>
      <el-table-column prop="leaveId" label="id" sortable></el-table-column>
      <el-table-column prop="applicantName" label="申请者姓名" ></el-table-column>
      <el-table-column prop="applicantType" label="申请者类型" ></el-table-column>
      <el-table-column prop="leaveType" label="请假类型" ></el-table-column>
      <el-table-column prop="startDate" label="开始日期"  :formatter="formatDate"></el-table-column>
      <el-table-column prop="endDate" label="结束日期" :formatter="formatDate"></el-table-column>
      <el-table-column prop="reason" label="请假理由" ></el-table-column>
      <el-table-column prop="status" label="审批状态" ></el-table-column>
      <el-table-column prop="createdAt" label="创建日期"  :formatter="formatDate"></el-table-column>
      <el-table-column label="操作" width="180">
        <template #default="{ row }">
          <el-button type="primary" :icon="Edit" size="small" @click="handleApprove(row)">审批</el-button>
          <el-button type="danger" :icon="Delete" size="small" @click="handleDelete(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <el-pagination
        background
        v-model:currentPage="currentPage"
        v-model:pageSize="pageSize"
        :page-sizes="[5, 10, 20]"
        :total="total"
        layout="prev, pager, next, sizes"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import { ref, onMounted } from 'vue';
import { ElMessage, ElMessageBox, ElMessageBoxOptions } from 'element-plus';
import { Delete, Edit, Search } from "@element-plus/icons-vue";

// 响应式变量
const leaveData = ref([]);
const currentPage = ref(1);
const pageSize = ref(5);
const total = ref(0);
const searchName = ref('');
const searchType = ref('');
const searchLeaveType = ref('');
const searchStatus = ref('');

// 日期格式化函数
const formatDate = (row, column, cellValue) => {
  if (!cellValue) return '无日期';
  const date = new Date(cellValue);
  if (isNaN(date.getTime())) {
    return '无效日期';
  }
  return date.toLocaleDateString();
};

// 组件挂载时加载数据
onMounted(() => {
  getData();
});

// 获取数据
const getData = () => {
  axios.get('http://localhost:8080/leave/page', {
    params: {
      pageNum: currentPage.value,
      pageSize: pageSize.value,
      name: searchName.value,
      type: searchType.value,
      leaveType: searchLeaveType.value,
      status: searchStatus.value
    }
  }).then(response => {
    leaveData.value = response.data.records;
    total.value = response.data.total;
  }).catch(error => {
    console.error(error);
  });
};

const handleCurrentChange = (pageNum) => {
  currentPage.value = pageNum;
  getData();
};

const handleSizeChange = (size) => {
  pageSize.value = size;
  getData();
};

// 审批操作
const handleApprove = (row) => {
  if (row.status === '通过') {
    ElMessage.info('该请假申请已经通过，无需再次审批');
    return;
  }
  ElMessageBox.confirm(
      `您确定要审批申请者姓名为【${row.applicantName}】的请假申请吗?`,
      '审批操作',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      } as ElMessageBoxOptions
  ).then(() => {
    approveLeave(row.leaveId);
  }).catch(() => {
    ElMessage.info('取消审批');
  });
};

// 审批请求
const approveLeave = (leaveId) => {
  axios.put(`http://localhost:8080/leave/approve/${leaveId}`)
      .then(response => {
        ElMessage.success('审批成功');
        getData();
      })
      .catch(error => {
        ElMessage.error('审批失败');
        console.error(error);
      });
};

// 删除操作
const handleDelete = (row) => {
  ElMessageBox.confirm(
      '您确定要删除申请者姓名为【' + row.applicantName + '】的请假申请吗?',
      '危险操作',
  ).then(() => {
    delrow(row.leaveId);
    ElMessage({
      type: 'success',
      message: '完成删除！',
    });
  }).catch(() => {
    ElMessage({
      type: 'info',
      message: '取消删除!',
    });
  });
};

// 删除请求
const delrow = (leaveId) => {
  axios.delete(`http://localhost:8080/leave/delete/${leaveId}`)
      .then(response => {
        getData();
      })
      .catch(error => {
        console.error(error);
      });
};

//查询
const handleSearch = () => {
  const params = {
    applicantName: searchName.value || null,
    applicantType: searchType.value || null,
    leaveType: searchLeaveType.value || null,
    status: searchStatus.value || null
  };

  axios.get('http://localhost:8080/leave/search', { params })
      .then(response => {
        leaveData.value = response.data;
        total.value = response.data.length;
      })
      .catch(error => {
        console.error(error);
        ElMessage.error('查询失败');
      });
};

// 字段排序
const handleSortChange = (sortData) => {
  const { prop, order } = sortData;
  leaveData.value = leaveData.value.sort((a, b) => {
    if (order === 'ascending') {
      return a[prop] > b[prop] ? 1 : -1;
    } else {
      return a[prop] < b[prop] ? 1 : -1;
    }
  });
};

// 创建响应式变量multipleSelection，用于存储当前选中的数据行
let multipleSelection = ref([]);

// 处理表格行选中状态变化的方法，val是当前选中的数据行数组
const handleSelectionChange = (val) => {
  // 清空数组，确保每次更新都是最新选中状态
  multipleSelection.value = [];
  val.forEach(item => {
    multipleSelection.value.push(item.id); // 将选中的每一行数据的id存入multipleSelection数组中
  });
};

// 批量删除
const handleDelList = () => {
  console.log('Selected leaveIds:', multipleSelection.value); // 添加日志，确保选择的 leaveIds 正确
  ElMessageBox.confirm(
      '您确定要删除选择的请假申请吗?',
      '危险操作',
  ).then(() => {
    const leaveIds = multipleSelection.value;
    axios.delete(`http://localhost:8080/leave/delete/batch`, {data: leaveIds})
        .then(response => {
          getData();
          ElMessage({ type: 'success', message: '完成批量删除！' });
        })
        .catch(error => {
          console.error('删除失败:', error); // 输出错误信息
          ElMessage({ type: 'error', message: '删除失败！' });
        });
  }).catch(() => {
    ElMessage({ type: 'info', message: '取消删除!' });
  });
};

</script>

<style scoped>
.topLocation {
  font-size: 16px;
  font-weight: bold;
  color: #000; /* 文字颜色为黑色 */
  padding: 10px;
  border-bottom: 2px solid #000; /* 底部边框，黑色 */
  display: flex;
  align-items: center; /* 垂直居中对齐 */
  justify-content: flex-start; /* 左对齐 */
  margin-bottom: 20px; /* 增加距离 */
}

.topTool {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.el-pagination {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.group {
  white-space: nowrap; /* 防止文字换行 */
  font-size: 14px;     /* 设置字体大小为 14px */
}
</style>
